<div>
  <div id="tool-bar" class="tool-bar">
    <div class="tool-bar-left btn-group">
      <span id="undoredo">
        <d-button
          id="undo1"
          *ngIf="hasUndo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.backButton' | translate"
          [disabled]="!hasUndo"
          (click)="handleUndoButtonClick($event)">
          <div class="icon-undo-customed"></div>
        </d-button>
        <d-button
          id="undo2"
          *ngIf="!hasUndo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.backButton' | translate"
          [disabled]="!hasUndo"
          (click)="handleUndoButtonClick($event)">
          <div class="icon-undo-disabled"></div>
        </d-button>
        <d-button
          id="redo1"
          *ngIf="hasRedo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.redoButton' | translate"
          [disabled]="!hasRedo"
          (click)="handleRedoButtonClick($event)">
          <div class="icon-redo-customed"></div>
        </d-button>
        <d-button
          id="redo2"
          *ngIf="!hasRedo"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.redoButton' | translate"
          [disabled]="!hasRedo"
          (click)="handleRedoButtonClick($event)">
          <div class="icon-redo-disabled"></div>
        </d-button>
      </span>
      <span id="zoominout">
        <d-button
          id="zoom-in"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomInButton' | translate"
          (click)="handleZoomInButtonClick($event)">
          <div class="icon-zoom-in-customed"></div>
        </d-button>
        <d-button
          id="zoom-out"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.zoomOutButton' | translate"
          (click)="handleZoomOutButtonClick($event)">
          <div class="icon-zoom-out-customed"></div>
        </d-button>
      </span>
      <d-button
        id="zoom-reset"
        dTooltip
        bsStyle="text-dark"
        [content]="'toolBar.zoomResetButton' | translate"
        (click)="handleZoomResetButtonClick($event)">
        <div class="icon-zoom-reset"></div>
      </d-button>
      <d-button
        id="zoom-fit"
        dTooltip
        bsStyle="text-dark"
        [content]="'toolBar.zoomFitButton' | translate"
        (click)="handleZoomFitButtonClick($event)">
        <div class="icon-zoom-out-map"></div>
      </d-button>
      <d-button
        id="switch"
        dTooltip
        bsStyle="text-dark"
        [content]="'toolBar.switchButton' | translate"
        (click)="handleSwitchDirectionButtonClick($event)">
        <div class="icon-switch-customed"></div>
      </d-button>
      <d-button
        id="run"
        *ngIf="statusGraph === 'stop'"
        dTooltip
        bsStyle="text-dark"
        [content]="'toolBar.runGraphButton' | translate"
        (click)="handleRunButtonClick($event)">
        <div class="icon-run-graph"></div>
      </d-button>
      <d-button
          id="stop"
          *ngIf="statusGraph === 'running'"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.stopGraphButton' | translate"
          (click)="handleStopButtonClick($event)">
          <div class="icon-stop-customed"></div>
      </d-button>
      <d-button
          id="restart"
          *ngIf="statusGraph === 'fault'"
          dTooltip
          bsStyle="text-dark"
          [content]="'toolBar.restartGraphButton' | translate"
          (click)="handleRestartButtonClick($event)">
          <div class="icon-restart-customed"></div>
      </d-button>
    </div>
    <div class="tool-bar-right" style="margin: 0 20px 0 20px;">
      <div style="display: inline-block;">
        <button
          id="selectDemo"
          (click)="showSelectDemoDialog(selectDemo)"
          class="tool-bar-button"
          style="display: inline-block;">
          {{'toolBar.selectDemo' | translate}}
        </button>
      <button
        id="tutorial"
        (click)="openTutorial($event)"
        class="tool-bar-button"
        style="display: inline-block;">
        {{'toolBar.openTutorial' | translate}}
      </button>
    </div>
  </div>
</div>
<d-toast 
  [value]="msgs" 
  [style]="{ top: '100px' }">
</d-toast>
<ng-template #selectDemo id="selectDemo">
  <div
    dLoading
    [showLoading]="showLoading">
    <d-card 
      class="card-container"
      *ngFor="let d of solutionList"
      style="width:50%;height:100%"
      (click)="onClickCard(d)">
      <d-card-header>
        <d-avatar 
          dCardAvatar 
          [name]="d.name">
        </d-avatar>
        <d-card-title>
          {{d.name}}
        </d-card-title>
      </d-card-header>
      <d-card-content>
        <div>
          {{d.desc}}
        </div>
      </d-card-content>
    </d-card>
  </div>
</ng-template>
